<template>
	<view v-if="show" class="root_grid">
		<view class="content">
			<view>选择您的姓名:</view>
			<view>
				<picker :range="staffs" range-key="trueName" @change="staffChange">
					<view class="shownames">{{myname||'请选择您的姓名'}}</view>
				</picker>
			</view>
			<view class="bottom"><button @click.stop="loginClick" size="mini" type="primary">登录</button></view>
		</view>
	</view>
</template>

<script>
	import staffapi from '@/api/staffapi.js';
	import {tourl} from '@/utils/common.js';
	export default {
		data() {
			return {
				staffs: [],
				myname: '',
				show:false,
				u_id:''
			}
		},
		methods: {
			staffChange({ detail: { value } }) {
				console.log('VALUE',value);
				const { id, trueName } = this.staffs[value]||{};
				this.myname = trueName;
				this.u_id = id;
			},
			loginClick() {
				if (!this.u_id) {
					return uni.showToast({
						title: '请选择您的姓名'
					});
				}
				uni.setStorageSync('u_id', this.u_id);
				tourl("/pages/index/index");
			}
		},
		
		onShow() {
			const u_id = uni.getStorageSync('u_id');
			if (u_id) {
				tourl("/pages/index/index");
				return;
			} else {
				staffapi.getlist().then(data => {
					console.log('DATA',data);
					this.staffs = data;
					this.show=true;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.root_grid{
	width:100vw;
	height:100vh;
	box-sizing: border-box;
	display: grid;
	place-items: center center;
	.content{
		width:80vw;
		height:120px;
		display:grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3,1fr);
		text-align: left;
		border: 1px dotted #ccc;
		padding:10px;
		border-radius: 5px;
		box-shadow: 2px 2px 6px 2px #f1f1f1;
		.bottom{
			text-align: center;
		}
		.shownames{
			background-color: #f1f1f1;
			height:40px;
			line-height: 40px;
			text-indent: 20px;
			border-radius: 5px;
		}
	}
}
</style>